<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .wrap{
            margin: 20px;
        }
        .buttons{
            margin-bottom: 10px;
        }
        .slide{
            width: 1100px;
            height: 100px;
            border: 1px solid #333;
            border-top: 0;
            position: relative;
        }
        .ball{
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            border-radius: 50%;
            background-color: pink;
            position: absolute;
            left: 0px;
            top: 0;
        }
    </style>
</head>
<body>
    <!-- .wrap>(.buttons>button*3)+.slide>.ball -->
    <div class="container">
        <div class="wrap">
            <div class="buttons">
                <button class="start">开始</button>
                <button class="pause">暂停</button>
                <button class="back">返回</button>
            </div>
            <div class="slide">
                <div class="ball">1</div>
            </div>
        </div>
        <div class="wrap">
            <div class="buttons">
                <button class="start">开始</button>
                <button class="pause">暂停</button>
                <button class="back">返回</button>
            </div>
            <div class="slide">
                <div class="ball">2</div>
            </div>
        </div>
        <div class="wrap">
            <div class="buttons">
                <button class="start">开始</button>
                <button class="pause">暂停</button>
                <button class="back">返回</button>
            </div>
            <div class="slide">
                <div class="ball">3</div>
            </div>
        </div>
        <div class="wrap">
            <div class="buttons">
                <button class="start">开始</button>
                <button class="pause">暂停</button>
                <button class="back">返回</button>
            </div>
            <div class="slide">
                <div class="ball">4</div>
            </div>
        </div>
    </div>
</body>
<script>
    // 需求: 点击三个按钮 分别控制ball 移动 暂停 返回

    // JS运动: 通过JS中DOM操作,每隔一段时间调整元素的位置  
    //       本质上: 通过计时器随时间调整元素的位置(定位 平移)


    // 匀速运动: y = vt; 每隔一段时间移动相同的距离
    // 加速运动: y = y0 + 1/2at^2 => 随着时间推移速度越来越快,每隔一段时间,运动的距离也越来越远
    // 减速运动: y = y0 + 1/2at^2 => 随着时间推移速度越来越慢,每隔一段时间,运动的距离也越来越段

    var startList = document.getElementsByClassName("start");
    var pauseList = document.getElementsByClassName("pause");
    var backList = document.getElementsByClassName("back");
    var ballList = document.getElementsByClassName("ball");



    document.addEventListener("click",clickHandler);
    function clickHandler(e){
        var e = e || window.event;
        var target = e.target || e.srcElement;

        if(target.className === "start"){
            var index = Array.from(startList).indexOf(target);
            console.log(index);
            var ball = ballList[index];
            animate(ball,"left",1000);
        }else if(target.className === "pause"){
            var index = Array.from(pauseList).indexOf(target);
            console.log(index);
            var ball = ballList[index];
            clearInterval(ball.timer);
        }else if(target.className === "back"){
            var index = Array.from(backList).indexOf(target);
            console.log(index);
            var ball = ballList[index];
            animate(ball,"left",0);
        }
    }
    


    /**
     * ele   运动的元素
     * attr  运动的css属性名 left top width height
     * end   运动的终点值
     * fn    回调函数 => 提前决定好要执行的内容, 指定位置调用时执行
     *
     */

    var obj = {};
    obj.a = 1;
    obj.b = 2;
    console.log(obj);


    function animate(ele,attr,end,fn){   // fn形参 => 接收传入的函数 => 每次运动结束执行
        // debugger;
        var cur = parseFloat(getStyle(ele,attr)); //  1. 记录运动的起始位置   2. 记录每隔10ms之后的位置  1000
        // var end = 1000;  // 终点值
        var speed = 0;

        // 多元素运动
        // 如果有多个元素同时运动 => 期望有对应个数的timer对应每一个运动的元素 => 暂停时清除对应的timer即可  

        // 解决方法
        // 将每个timer存到元素节点的属性上     元素节点 => 是一个对象 => 自定义属性(赋值一个不存在的属性)


        clearInterval(ele.timer);
        ele.timer = setInterval(function(){

            // 匀速运动
            // speed = end >= cur ? 10 : -10

            // 加速运动   end > cur =>正向运动   end < cur  反向运动 
            speed = end > cur ? speed + 5 : speed - 5;
            console.log(speed);




            cur += speed;  // 记录每隔10ms之后的位置  
            ele.style[attr] = cur + "px"; 
            // circle += 60;
            // ele.style.transform = `rotate(${circle}deg)`;

            // cur >= end
            if(Math.abs(cur - end) <= Math.abs(speed)){  //在跑一次就超了  
                clearInterval(ele.timer);
                ele.style[attr]  = end + "px";

                if(fn){
                    fn();
                }
            }

        },10);
    }

    function getStyle(ele,attr){
        if(window.getComputedStyle){
            return window.getComputedStyle(ele)[attr];
        }else{
            return ele.currentStyle[attr];
        }
    }
</script>
</html>